<!--
 * @Author: cqg
 * @Date: 2021-07-08 11:19:24
 * @LastEditTime: 2021-07-09 20:57:38
 * @Description: 入住信息修改
 * @LastEditors: cqg
-->
<template>
  <el-dialog title="入住编辑" :visible.sync="dialogVisible" class="basic-from" @close="resetForm" append-to-body width="1000px">
    <el-collapse v-model="activeName">
      <el-collapse-item title="基本信息" name="0">
        <el-form :model="form" ref="ruleForm" class="form-wrap">
          <el-form-item label="入住人" prop="name">
            <el-input v-model="form.name" disabled />
          </el-form-item>
          <el-form-item label="证件号" prop="cardId">
            <el-input v-model="form.cardId" disabled />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" disabled />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="入住信息变更" name="1">
        <el-form :model="form" :rules="rules" ref="ruleForm" class="form-wrap">
          <el-form-item label="入住房间" prop="houseId">
            <el-select v-model="form.houseId" placeholder="请选择入住房间" filterable style="width:90%" disabled>
              <el-option v-for=" item in roomList" :key="item.houseId" :label="item.roomNum" :value="item.houseId" />
            </el-select>
            <el-button type="primary" style="position:absolute;right:-5px;" size="mini" @click="roomChange">{{buttonName}}</el-button>
          </el-form-item>
          <el-form-item label="原房间是否需要消杀" prop="isKill" v-if="roomChangeShow">
            <el-radio-group v-model="form.isKill" style="width:100%">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择新房间" prop="newRoomId" v-if="roomChangeShow">
            <el-select v-model="form.newRoomId" placeholder="请选择新房间" filterable @change="newRoomChange">
              <el-option v-for=" item in roomList" :key="item.houseId" :label="`${item.roomFloor}层·${item.roomNum}-${dictFilter(item.roomState)} `" :value="item.houseId" />
            </el-select>
          </el-form-item>
          <el-form-item label="入住时间" prop="moveStartTime">
            <el-date-picker v-model="form.moveStartTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
          <el-form-item label="隔离天数" prop="moveDay">
            <el-input v-model="form.moveDay" v-only-number="{min:0, max:10000, }" />
          </el-form-item>
          <el-form-item label="计划解除隔离时间" prop="moveEndTime">
            <el-input v-model="form.moveEndTime" disabled placeholder="计划解除隔离时间" />
          </el-form-item>
          <el-form-item label="变更原因" class="full">
            <el-input v-model="form.remark" type="textarea" />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="变更记录" name="2">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="入住人" prop="name" width="70" />
          <el-table-column label="证件号" prop="cardId" />
          <el-table-column label="入住房间" prop="roomNum" />
          <el-table-column label="入住时间" prop="moveStartTime" />
          <el-table-column label="隔离天数" prop="moveDay" width="70">
            <template slot-scope="scope">{{scope.row.moveDay}} 天</template>
          </el-table-column>
          <el-table-column label="计划解除隔离时间" prop="moveEndTime" />
          <el-table-column label="变更原因" prop="remark" />
          <el-table-column label="操作人" prop="creapers" />
          <el-table-column label="操作时间" prop="creatime" width="140" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">取 消</el-button>
      <el-button type="primary" v-throttle="[submit]">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listRoom, getLatestPersonIofo, houseEdit } from "@/views/yq-personnel/api/checkIn.js";
import moment from "moment";
export default {
  name: 'infoEdit',
  inject: ["initList"],
  data () {
    return {
      buttonName: '换房',
      roomChangeShow: false,
      dialogVisible: false,
      activeName: ['0', '1'],
      //房间列表
      roomList: [],
      form: {
        personId: '',
        isKill: '',
        name: '',
        cardId: '',
        houseId: '',
        newRoomId: '',
        moveStartTime: '',
        moveDay: '',
        moveEndTime: '',
        remark: '',
      },
      tableData: [],
      rules: {
        // name: [{ required: true, message: '请输入人员姓名', trigger: 'blur' }],
        // cardId: [{ required: true, message: '请输入证件号', trigger: 'blur' }],
        moveDay: [{ required: true, message: '请输入隔离天数', trigger: 'blur' }],
        houseId: [{ required: true, message: '请选择入住房间', trigger: 'change' }],
        isKill: [{ required: true, message: '请选择是否入住房间', trigger: 'change' }],
        newRoomId: [{ required: true, message: '请选择新的入住房间', trigger: 'change' }],
        moveStartTime: [{ type: 'string', required: true, message: '请选择入住时间', trigger: 'blur' }],
        moveEndTime: [{ required: true, message: '请选择计划接触隔离时间', trigger: 'change' }],
      }
    }
  },
  watch: {
    'form.moveDay' (v) {
      if (v) {
        this.form.moveEndTime = moment(this.form.moveStartTime).add(v, 'days').format("yyyy-MM-DD hh:mm:ss");
      }
    }
  },
  methods: {
    // 选择新换房间监听事件
    newRoomChange (e) {
      if (e == this.form.houseId) {
        this.form.newRoomId = ''
        this.$message.error('换房后的房间不能选择是原来所在房间');
      }
    },
    dictFilter (v) {
      let item = this.getDict('room_state').find(e => e.value == v)
      return item.label
    },
    //修改房间弹窗监听事件
    async show (row) {
      this.dialogVisible = true
      let rpsOne = await listRoom({ hotelBaseInfoId: row.hotelBaseInfoId })
      let rpsTwo = await getLatestPersonIofo(row.personId)
      this.roomList = rpsOne.data.data
      let { data, list } = rpsTwo.data.data
      this.form = data
      this.form.personId = row.personId
      this.tableData = list
    },
    //点击换房按钮监听事件
    roomChange () {
      this.roomChangeShow = !this.roomChangeShow
      this.buttonName = this.roomChangeShow ? '取消换房' : '换房'
      this.rules.isKill = this.roomChangeShow ? [{ required: true, message: '请选择是否入住房间', trigger: 'change' }] : [];
      this.rules.newRoomId = this.roomChangeShow ? [{ required: true, message: '请选择新的入住房间', trigger: 'change' }] : [];
      if (!this.roomChangeShow) {
        this.form.newRoomId = ''
        this.form.isKill = ''
      }
    },
    //提交修改
    submit () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let rps = await houseEdit(this.form)
          this.initList({ current: 1, })
          this.$message.success('提交成功！');
          this.resetForm()
        } else
          return false;
      });
    },
    resetForm () {
      this.roomChangeShow = false
      this.buttonName = "换房",
        this.form = {
          personId: '',
          isKill: '',
          name: '',
          cardId: '',
          houseId: '',
          newRoomId: '',
          moveStartTime: '',
          moveDay: '',
          moveEndTime: '',
          remark: '',
        }
      this.dialogVisible = false
      this.$refs.ruleForm.resetFields();
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-collapse-item__header {
  font-weight: 700;
  padding: 7px;
  border-radius: 5px;
  background-color: #cce1f1;
  opacity: 0.9;
  color: blue;
  margin-bottom: 20px;
}
/deep/.el-dialog__body {
  height: 580px;
  overflow-y: auto;
}
</style>